<template>
  <el-container class="main_con">
    <ufrom @submit="saveData" ref="ufrom">
      <el-form size="medium" label-width="100px" ref="itemForm" :model="obj" :rules="itemRules" class="edit_form" style="width:90%">
        <div class="setting_body_item">
          <div class="header">{{ pageName }}</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form-item label="文章标题" prop="title"><el-input placeholder="请输入文章标题" v-model="obj.title" style="width:360px;"></el-input></el-form-item>
              <el-form-item label="副标题" prop="subhead"><el-input placeholder="请输入副标题" v-model="obj.subhead" style="width:360px;"></el-input></el-form-item>
              <el-form-item label="文章分类" prop="type">
                <el-select v-model="obj.type" placeholder="请选择文章所属分类" style="width:360px">
                  <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="文章首图" prop="headimg">
                <Upload :tempUrl="obj.headimg" @input="getImage" style="width:100px;height:100px;"></Upload>
                <span style="color:#909399;font-size:12px;">请上传大小100px*100px或此比例的图片</span>
              </el-form-item>
              <el-form-item label="文章内容" prop="content"><tinymce v-model="obj.content" :height="300" /></el-form-item>
              <el-form-item label="状态">
                <el-radio-group v-model="obj.status">
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="0">未启用</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </ufrom>
  </el-container>
</template>

<script>
import Upload from '@/components/Upload/SingleImage2';
import Tinymce from '@/components/Tinymce';

import {addArticle, editArticle, getArticle, getArticleCateAll} from '@/api/mall/article';
export default {
  data() {
    return {
      obj: {
        type: '',
        title: '',
        subhead: '',
        headimg: '',
        content: '',
        status: 1 //0:未启用;1:启用
      },
      _obj: {},
      pageIsEdit: 0, //0->新增,1->编辑,2->通过申请
      pageName: '新增文章',
      isLoading: false,
      itemRules: {
        type: [
          {
            required: true,
            message: '分类必须选择'
          }
        ],
        title: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入文章标题'
          }
        ],
        subhead: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入副标题'
          }
        ],
        headimg: [
          {
            required: true,
            message: '请上传首图'
          }
        ],
        content: [
          {
            required: true,
            message: '内容不能为空'
          }
        ]
      },
      type: []
    };
  },
  components: {
    Upload,
    Tinymce
  },
  created() {
    //获取基础分类数据
    this.getCateAll();
    //获取路由参数(编辑时使用)
    if (this.$route.query.id) {
      //编辑页面
      this.pageIsEdit = 1;
      this.pageName = '编辑文章';
      this.getArticle(this.$route.query.id);
    } else {
      this.pageIsEdit = 0;
      this.pageName = '新增文章';
      this._obj = Object.assign({}, this.obj);
    }
  },
  watch: {
    'obj.headimg': {
      handler: function() {
        //手动触发图片校验
        this.$nextTick(e => {
          this.$refs.itemForm.validateField('headimg');
        });
      },
      deep: true
    },
    'obj.content': {
      handler: function() {
        //手动触发图片校验
        this.$nextTick(e => {
          this.$refs.itemForm.validateField('content');
        });
      },
      deep: true
    }
  },
  methods: {
    //获取图片
    getImage(val) {
      this.obj.headimg = val;
    },
    //编辑时获取文章默认数据
    getArticle(id) {
      this.isLoading = true;
      getArticle(id)
        .then(res => {
          this.isLoading = false;
          this.obj = {...res.msg};
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //获取所有分类
    getCateAll() {
      this.isLoading = true;
      getArticleCateAll()
        .then(res => {
          this.isLoading = false;
          this.type = res.msg;
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //保存数据
    saveData() {
      let that = this;
      let _data = Object.assign({}, this.obj);
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          //处理数据
          if (that.indate) {
            _data.indate = '0';
          }

          //保存数据
          this.isLoading = true;
          //this.$refs.shForm.resetFields();
          switch (this.pageIsEdit) {
            case 0:
              //新增
              addArticle(_data)
                .then(res => {
                  this.$refs.ufrom.init();
                  this.$router.push('/article/list');
                })
                .catch(e => {
                  this.$refs.ufrom.init();
                });
              break;
            case 1:
              //编辑
              //删除特定字段
              delete _data.status_text;
              editArticle(_data)
                .then(res => {
                  this.$refs.ufrom.init();
                  this.$router.push('/article/list');
                })
                .catch(e => {
                  this.$refs.ufrom.init();
                });
              break;
            default:
              //empty
              break;
          }
        } else {
          this.$refs.ufrom.init();
          //console.log('error')
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
